<template>
  <div>
    <el-carousel type="card" :interval="4000" style=" margin-left: calc(50%-500); height: 430px;">
      <el-carousel-item
        :style="{ backgroundImage: `url(${imgUrl})`, backgroundRepeat: 'no-repeat', backgroundSize: '100% 100%', height: '400px' }">
        <div style="background: rgba(0,0,0,0.5)"><img src='../../assets/banner.png' alt="" height="400px"></div>

      </el-carousel-item>
      <el-carousel-item v-for="item in carouselList" :key="item.id"
        :style="{ backgroundImage: `url(${item.cover})`, backgroundRepeat: 'no-repeat', backgroundSize: '100%', height: '400px' }">
        <div
          style="position:relative; vertical-align: bottom; background: rgba(0,0,0,0.5);height:400px; text-align: center;"
          @click="goRoute(item.id)">
          <a>
            <div class="title">
              <span style="margin-left: 15px;">
                <a-icon type="right" />&nbsp;{{ item.title }}
              </span>
            </div>
          </a>
          <img :src="item.cover" height="400px" object-fit="cover" />
        </div>
      </el-carousel-item>
    </el-carousel>
    <el-divider></el-divider>
  </div>
</template>
  
<script>
// import carousel from '../../assets/carousel.jpg'
// import { defineComponent } from '@vue/composition-api'

export default {
  data() {
    return {
      imgUrl: require('../../assets/banner.png'),
    }
  },
  props: {
    carouselList: [],
  },
  methods: {
    goRoute(id) {
      this.$router.push({ path: '/route', query: { id } })
    },
  },
}
</script>


<style scoped>
a {
  text-align: left;
  position: absolute;
  display: inline-block;
  bottom: 0px;
  left: 0px;
  width: 100%;
  line-height: 50px;
  /* text-shadow: 2px 2px gray; */
  font-size: 25px;
  font-family: 'YouYuan';
  font-weight: 900;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(5px);
}

span {
  color: white;
  transition: all 0.3s;
}

span:hover {
  color: #409eff;
}

.title {
  width: 70%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: white;
  transition: all 0.3s;
}

.title:hover {
  color: #409eff;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

/* .el-carousel__item:nth-child(2n) {
  background-image: url('../../assets/hexagon2.jpg');
}

.el-carousel__item:nth-child(2n+1) {
  background-image: url('../../assets/hexagon2.jpg');
} */

:deep .el-carousel__container {
  height: 400px;
}
</style>